<!-- 生日海报页面 -->
<template>
  <div class="page-content">
    <!-- 海报模块 -->
    <div id="poster-module" class="poster-module">
      <!-- 海报背景图 -->
      <van-image class="poster-img" :src="posterData.image" @load="load = true">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
      <!-- 生日信息 -->
      <div v-if="load" class="bless-text">
        <div class="en-bless-title">
          <div>Happy Birthday!</div>
          <div>{{ posterData.owner.nameEn }}</div>
        </div>
        <div class="ch-bless-title">生日快乐！{{ posterData.owner.name }} ~</div>
        <div class="line" />
        <van-image class="line-img" :src="require('@/assets/line.png')" />
        <div class="text" v-html="posterData.text" />
      </div>
      <!-- logo -->
      <div v-if="load" class="icon-module">
        <div>MINTH GROUP</div>
        <div>{{ renderTime(posterData.createTime, 'YYYY-MM-DD') }}</div>
      </div>
      <!-- 祝福语模块 -->
      <div v-if="load" class="bless-module">
        <div v-if="blessData && blessData.length > 0">
          <div v-for="item in blessData" :key="item.id" class="bless-item">
            <div class="name">{{ item.fromUser.name }}：</div>
            <div class="bless">{{ item.content }}</div>
          </div>
        </div>
        <div v-else class="empty-tip-box">
          <div class="en-empty">Your friends are still on their way here~</div>
          <div class="ch-empty">伙伴还在赶来的路上喔~</div>
        </div>
      </div>
      <!-- 礼物墙 -->
      <div v-if="load" class="gift-module">
        <div v-if="giftData && giftData.length > 0" class="gift-content">
          <div v-for="(gift, index) in giftData" :key="gift.id" class="gift-item">
            <van-image class="gift-image" fit="contain" :src="gift.url" />
            <div class="en-name">{{ gift.labelEn }}</div>
            <div class="ch-name">{{ gift.label }}</div>
            <div class="gift-sum">×{{ gift.sum }}</div>
            <div v-show="setRightLine(gift, index)" class="border-right" />
          </div>
        </div>
        <div v-else class="empty-tip-box">
          <div class="en-empty">Your friends are still on their way here~</div>
          <div class="ch-empty">伙伴还在赶来的路上喔~</div>
        </div>
      </div>
    </div>
    <!-- 右侧悬浮按钮 -->
    <div v-if="load" class="export-box">
      <!-- 生成图片并导出按钮 -->
      <van-button
        :loading="exportLoad"
        class="export-btn"
        icon="down"
        @click="exportImage"
      />
    </div>
  </div>
</template>

<script>
import { param2Obj } from '@/utils'
import html2canvas from 'html2canvas'
import { Image as VanImage, Divider, Toast } from 'vant'
import { judgeBrowser } from '@/utils/index.js'
import { getGiftInfo } from '@/dict/gift.js'
export default {
  components: { VanImage, [Divider.name]: Divider },
  data() {
    return {
      posterId: '', // 海报Id
      load: false,
      posterData: {}, // 海报数据
      giftData: [], // 礼物数据
      blessData: [], // 祝福数据
      exportLoad: false // 导出海报load
    }
  },
  mounted() {
    const { honorId, iframe } = param2Obj(window.location.href)
    // 手机端或者PC端嵌入的iframe
    if (judgeBrowser().isMobile || iframe || this.$store.getters.iframe) {
      if (iframe && !this.$store.getters.iframe) {
        this.$store.dispatch('user/SetIframe', true).then(() => {})
      }
      this.posterId = honorId
      this.getPosterData()
    } else {
      this.$router.push({ path: '/pc', query: { src: window.location.href }})
    }
  },
  methods: {
    // 获取海报信息
    getPosterData() {
      const params = {
        honorId: this.posterId
      }
      this.$apis.honor.getPosterInfo(params).then(res => {
        this.posterData = res
        this.blessData = []
        const giftList = []
        res.commentList.forEach(item => {
          if (item.type === 'text') this.blessData.push(item)
          else if (item.type === 'gift') giftList.push(item)
        })
        this.giftData = this.getGiftData(giftList)
      })
    },
    // 整理礼物数据格式
    getGiftData(data) {
      const arr = []
      data.forEach(gift => {
        const haveArr = arr.filter(item => item.id === gift.content)
        if (haveArr.length > 0) {
          arr.forEach(item => {
            if (item.id === gift.content) item.sum = item.sum + 1
          })
        } else {
          const giftInfo = getGiftInfo(gift.content)
          arr.push({
            ...giftInfo,
            sum: 1
          })
        }
      })
      return arr
    },
    // 渲染时间
    renderTime(data, format) {
      let time = ''
      if (data) time = this.$dayjs(data).format(format || 'YYYY-MM-DD HH:mm:ss')
      return time
    },
    // 渲染礼物右侧分界线
    setRightLine(data, index) {
      let flag = false
      const num = (index + 1) % 4
      if (num !== 0 && index !== this.giftData.length - 1) {
        flag = true
      }
      return flag
    },
    // 匹配本地礼物信息
    getGiftInfo,
    // 导出生成图片
    async exportImage() {
      this.exportLoad = true
      try {
        const element = document.getElementById('poster-module')
        console.log('element', element)
        const allocation = { // 转换设置
          useCORS: true, // 是否尝试使用CORS从服务器加载图像
          backgroundColor: null // 画布背景色（如果未在DOM中指定）。设置null为透明
        }
        const canvas = await html2canvas(element, allocation)
        this.downloadCanvasAsImage(canvas, 'birthday.png')
      } catch (error) {
        this.exportLoad = false
        Toast.fail(`Error exporting as image: error`)
      }
    },
    downloadCanvasAsImage(canvas, filename) {
      // 创建一个a标签模拟点击进行下载
      const link = document.createElement('a')
      link.href = canvas.toDataURL()
      link.download = filename
      link.click()
      Toast.success(this.$t('tips.exportSuccess'))
      this.exportLoad = false
    }
  }
}
</script>

<style lang="less" scoped>
.page-content{
  overflow-y: auto;
  background: rgba(255, 255, 255, 0);
}
.poster-module {
  width: 100%;
  position: relative;
  .poster-img {
    width: 100%;
  }
  .bless-text {
    width: 80%;
    color: #fff;
    position: absolute;
    left: 10%;
    top: 80px;
    .en-bless-title {
      line-height: normal;
      font-family: Poppins;
      font-size: 69px;
      font-style: normal;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .ch-bless-title {
      line-height: normal;
      font-family: Inter;
      font-size: 52px;
      font-style: normal;
      font-weight: 400;
    }
    .line-img {
      width: 100%;
      margin: 54px 0 50px;
    }
    .text {
      line-height: 48px;
      font-family: Inter;
      font-size: 30px;
      font-weight: 400;
      font-style: normal;
    }
  }
}
.icon-module {
  width: 80%;
  line-height: normal;
  color: #fff;
  font-family: Poppins;
  font-size: 32px;
  font-weight: 500;
  position: absolute;
  left: 10%;
  top: 47.4%;
}
.bless-module {
  width: 86%;
  height: 364px;
  background: rgba(255, 255, 255, 0);
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  left: 7%;
  top: 62%;
  .bless-item {
    width: calc(100% - 60px);
    border-bottom: 1px solid #FFFFFF;
    padding: 20px 0;
    margin: 0 30px;
    display: flex;
    .name {
      min-width: 120px;
      line-height: normal;
      color: #FFFFFF;
      font-family: Inter;
      font-size: 27px;
      font-weight: normal;
      margin-right: 20px;
      word-break: break-word;
    }
    .bless {
      line-height: normal;
      color: #FFFFFF;
      font-family: Inter;
      font-size: 27px;
      font-weight: normal;
      word-break: break-word;
    }
  }
  :nth-last-child(1) {
    border-bottom: none;
  }
}

.gift-module {
  width: 86%;
  height: 200px;
  background: rgba(255, 255, 255, 0);
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  left: 7%;
  top: 85%;
  .gift-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .gift-item {
      width: 25%;
      padding: 15px 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      position: relative;
      .gift-image {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
      }
      .en-name {
        line-height: normal;
        color: #FFFFFF;
        font-family: Inter;
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 5px;
      }
      .ch-name {
        line-height: normal;
        color: #FFFFFF;
        font-family: Inter;
        font-size: 18px;
        font-weight: normal;
      }
      .gift-sum {
        line-height: normal;
        color: #FFFFFF;
        font-family: Poppins;
        font-size: 28px;
        font-weight: normal;
        position: absolute;
        top: 0;
        right: 10px;
      }
      .border-right {
        width: 1px;
        height: 45%;
        background-color: #fff;
        position: absolute;
        right: 0;
        top: 25%;
      }
    }
  }
}

.empty-tip-box {
  margin: 0 30px;
  color: #FFF;
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  .en-empty {
    line-height: normal;
    font-size: 27px;
    margin-bottom: 7px;
  }
  .ch-empty {
    line-height: normal;
    font-size: 27px;
  }
}

.export-box {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 2%;
  right: 6%;
  .export-btn {
    width: 60px;
    height: 60px;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
  }
}

/* 滚动条轨道样式 */
::-webkit-scrollbar {
  width: 1px; /* 设置滚动条宽度 */
  background: #fff;
}
 // 设置滑块样式
::-webkit-scrollbar-thumb {
  width: 10px; /* 设置滑块宽度 */
  background-color: #0DBAE3;
}

/* 隐藏滚动条的整个容器 */
.page-content {
  -ms-overflow-style: none;  /* IE 10+ */
  scrollbar-width: none;  /* Firefox */
}
/* 针对Webkit内核浏览器的隐藏滚动条样式 */
.page-content::-webkit-scrollbar {
  display: none;
}

</style>
